<style scoped>
    .loginBox {
        width: 390px;
        height: 500px;
        padding-bottom: 50px;
        margin-top: -80px;
    }

    .btn-blue {
        background: linear-gradient(270deg, #0090FF 0%, #2C6AE7 100%);
        box-shadow: 0px 20px 30px 0px rgba(89, 117, 242, 0.03);
        border-radius: 4px;
    }

    .temp {
        webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .mainBox {
        background: #fff;
        padding: 30px 40px 40px;
    }

    .h40 {
        height: 40px;
        line-height: 40px;
    }
</style>
<template>
    <div class="flex-c-c" style="width:100%;height:100%;background-color: #0088ff"
         :style="{background: 'url(assets/image/login-bg.png)'}">
        <div class="loginBox">

            <div class="m-b-80 t-c">
                <!--<img class="w100p" src="assets/image/login-logo.png">-->
                <!--<img  class="w140" src="assets/image/login-logo-top.png" alt="">-->
                <!--<img  class="w100p" src="assets/image/login-logo-text.png" alt="">-->
                <div class="white text-32">环卫管理平台</div>
            </div>

            <div class="mainBox" v-show="type === 'login'">


                <div class="m-b-20">
                    <div class="m-b-10">
                        <div class="blod m-b-5">账号</div>
                        <Input v-model="username" size="large" placeholder="请输入用户名称"/>
                    </div>

                    <div class="m-b-10">
                        <div class="blod m-b-5">密码</div>
                        <Input v-model="password" type="password" size="large" placeholder="请输入登录密码"/>
                    </div>

                    <div class="m-b-10">
                        <div class="blod m-b-5">验证码</div>

                        <div class="flex-c">
                            <Input class="flex-1" v-model="vcode" @on-keyup.enter="confirmLogin" size="large" placeholder="请输入验证码"/>
                            <div @click="changeVcode" class="t-r green blod text-24 temp w80">{{vcodeTemp}}</div>
                        </div>
                    </div>

                </div>
                <div class="flex-c m-b-10">
                    <Button @click="confirmLogin" class="btn-blue" style="height: 50px;" long size="large"
                            type="primary">登录
                    </Button>
                </div>

                <!--<div class="t-c"><span class="blue cursor-p" @click="changeType('forget')">忘记密码</span></div>-->
            </div>

            <div class="mainBox" v-show="type === 'forget'">

                <div class="m-b-20">

                    <div class="m-b-10">
                        <div class="blod m-b-5">手机号</div>
                        <Input v-model="fMobile" maxlength="11" size="large" placeholder="请输入手机号"/>
                    </div>

                    <div class="t-r m-r-10">
                        <span class="cursor-p" :class="disabledVBtn? 'gray': 'blue'" @click="getVCode">{{isNumber(showVCode)? showVCode + 's': showVCode}}</span>
                    </div>

                    <div class="m-b-10">
                        <div class="blod m-b-5">验证码</div>
                        <Input v-model="fVcode" size="large" placeholder="请输入手机验证码"/>
                    </div>

                    <div class="m-b-10">
                        <div class="blod m-b-5">登录密码</div>
                        <Input type="password" v-model="fPassword" size="large" placeholder="设置新登录密码"/>
                    </div>

                    <div class="m-b-10">
                        <div class="blod m-b-5">确认密码</div>
                        <Input type="password" v-model="fPassword2" size="large" placeholder="请再次输入密码"/>
                    </div>


                </div>

                <div class="flex-c-c">
                    <Button @click="changeType('login')" class=" w30p m-r-15" type="default">取消</Button>
                    <Button @click="confirmForget" class="btn-blue w30p" type="primary">确定</Button>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                type: 'login',

                vcodeTemp: '',

                username: '',
                password: '',
                vcode: '',

                fMobile: '',
                fVcode: '',
                fPassword: '',
                fPassword2: '',

                /* 验证码 */
                //倒计时时间
                vTime: 60,
                //显示倒计时
                showVCode: '获取验证码',
                disabledVBtn: false,
            }
        },
        created() {
            this.changeVcode();
            console.log('util', this.util)
        },
        methods: {
            changeType(type) {
                this.type = type;
            },
            changeVcode(len) {
                len = 4;
                var orgStr = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz123456789';
                let returnStr = "";
                for (var i = 0; i < len; i++) {
                    returnStr += orgStr.charAt(Math.floor((Math.random() * orgStr.length)));
                }
                this.vcodeTemp = returnStr;
            },
            confirmLogin() {
                if (!this.username) {
                    this.$Message.warning('请输入账号');
                    return;
                }
                if (!this.password) {
                    this.$Message.warning('请输入密码');
                    return;
                }
                if (this.vcode.toLocaleLowerCase() != this.vcodeTemp.toLocaleLowerCase()) {
                    this.$Message.warning('请输入正确验证码')
                    return;
                }

                let postData = {
                    userAccount: this.username,
                    password: this.password,
                };
                this.$Spin.show()
                this.util.post('/hand/system/login', postData, 'formdata').then(res => {

                    console.log('登录返回', res);
                    if (res.status == 200) {

                        let userInfo = {
                            userId: res.userId,
                            token: res.token,
                        };
                        this.$store.commit('user/setUserInfo', userInfo);
                        this.$store.dispatch('user/getUserInfo').then(res => {
                            this.$Spin.hide()

                            this.$Message.success('登录成功');

                            // if (res.orgnizationName === '延安网信办') {
                                this.$router.push('/')
                            // } else {
                            //     this.$router.push({
                            //         name: 'task_task'
                            //     })
                            // }


                        })
                    } else {
                        this.$Spin.hide()
                        this.$Message.warning(res.msg)
                    }


                })


            },

            //验证码
            getVCode() {
                if (this.disabledVBtn) {
                    return
                }
                if (!this.fMobile) {
                    this.$Message.warning('请输入手机号');
                    return;
                }
                if (!/^1\d{10}$/.test(this.fMobile)) {
                    this.$Message.warning('请输入正确手机号');
                    return;
                }

                let postData = {
                    "phoneNum": this.fMobile,
                };
                this.disabledVBtn = true;
                this.showVCode = '即将发送...';

                this.util.post('/management/phoneCode', postData, 'formdata').then(res => {
                    console.log('发送验证码返回', res);
                    if (res.status == 200) {
                        this.showVCode = this.vTime;
                        this.vMinus();

                    } else {
                        this.$Message.warning(res.msg);
                        this.disabledVBtn = false;
                        this.showVCode = '获取验证码';
                    }
                });

            },
            vMinus() {
                this.timer = setInterval(() => {

                    if (this.showVCode === 0) {
                        this.resetVCode();
                        return
                    }

                    this.showVCode--;
                }, 1000);
            },
            resetVCode() {
                clearInterval(this.timer);
                this.disabledVBtn = false;
                this.showVCode = '获取验证码';
            },

            isNumber(val) {
                return typeof val === 'number';
            },

            confirmForget() {

                if (!this.fMobile) {
                    this.$Message.warning('请输入手机号');
                    return;
                }
                if (!/^1\d{10}$/.test(this.fMobile)) {
                    this.$Message.warning('请输入正确手机号');
                    return;
                }
                if (!this.fVcode) {
                    this.$Message.warning('请输入验证码');
                    return;
                }
                if (!this.fPassword) {
                    this.$Message.warning('请输入密码');
                    return;
                }
                if (this.fPassword !== this.fPassword2) {
                    this.$Message.warning('两次输入密码不一致');
                    return;
                }

                let postData = {
                    "userAccount": this.fMobile,
                    "code": this.fVcode,
                    "pwd": this.fPassword,
                    "confirm_pwd": this.fPassword2,
                };

                this.util.post('/management/pc_edit_pwd', postData, 'formdata').then(res => {
                    console.log('修改密码返回', res);
                    if (res.status == 200) {
                        this.$Message.success(res.msg);
                        this.type = 'login';
                        this.fMobile = '';
                        this.fVcode = '';
                        this.fPassword = '';
                        this.fPassword2 = '';
                    } else {
                        this.$Message.warning(res.msg);
                    }
                });


            },
        },
    }
</script>
